<template>
	<view class="messagePage myBackground">
		<view class="content">
			<view class="mb15">
				<u-tabs :list="tabList" :current="current" lineColor="#3276FF" lineWidth="25" :activeStyle="{color: '#ffffff'}"
					:inactiveStyle="{color: '#ffffff'}" @change="tabsChange"></u-tabs>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @change="transition">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y class="h100p w100p" @scrolltolower="onreachBottom">
						<div class="pl15 pr15">
							<view class="mb15">
								<view class="d-flex a-center j-sb">
									<view class="d-flex flex-column j-sb topBoxItem bgColor1 p10">
										<view class="title">设备控制</view>
										<view class="d-flex j-end">
											<u--image :showLoading="true" :src="dControl" width="56rpx" height="56rpx"></u--image>
										</view>
									</view>
									<view class="d-flex flex-column j-sb topBoxItem bgColor2 p10">
										<view class="title">流程控制</view>
										<view class="d-flex j-end">
											<u--image :showLoading="true" :src="flow" width="56rpx" height="56rpx"></u--image>
										</view>
									</view>
									<view class="d-flex flex-column j-sb topBoxItem bgColor3 p10">
										<view class="title">设备故障</view>
										<view class="d-flex j-end">
											<u--image :showLoading="true" :src="breakdown" width="56rpx" height="56rpx"></u--image>
										</view>
									</view>
								</view>
							</view>
							<view>
								<view class="mb15" v-for="item in imgListData" :key="item.id">
									<view class="content_item p15 boxSizing">
										<view class="d-flex a-center j-sb mb10">
											<view class="d-flex a-center">
												<view class="bluePoint mr10"></view>
												<view class="itemName">{{item.name}}</view>
											</view>
											<view class="d-flex a-center">
												<view class="mr10">
													<u-tag :text="item.type==0?'未读':'已读'" size="mini" bgColor="#E93333"
														borderColor="#E93333"></u-tag>
												</view>
												<view class="itemName">{{item.time}}</view>
											</view>
										</view>
										<view class="itemTitle mb10">{{item.contentName}}</view>
										<view class="itemName">{{item.contentDesc}}</view>
									</view>
								</view>
							</view>
							<view style="height: 2rpx;"></view>
						</div>
					</scroll-view>

				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y @scrolltolower="onreachBottom">
						<div class="pl15 pr15">
							<!-- 22 -->
						</div>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

		<tab-bar-view :tabCode="'2'"></tab-bar-view>
	</view>
</template>

<script>
	import {

	} from "@/api/index.js"

	export default {
		data() {
			return {
				userInfo: {},
				background_img: uni.getStorageSync('setUrl'),
				swiperCurrent: 0,
				current: 0,
				tabList: [{
						name: '未读',
					},
					{
						name: '已读'
					}
				],
				dControl: require('static/img/message/deviceControl.png'),
				flow: require('static/img/message/flow.png'),
				breakdown: require('static/img/message/breakdown.png'),
				imgListData: [{
						id: '0',
						name: '数据看板',
						type: 0,
						time: '18:13',
						contentName: "盐城外国语学校一号楼二层宿舍201",
						contentDesc: "盐城外国语学校一号楼二层宿舍201，空调温度32℃，风力4级将与12:00合闸......",
					},
					{
						id: '1',
						name: '控制中心',
						type: 0,
						time: '18:13',
						contentName: "盐城外国语学校一号楼二层宿舍201",
						contentDesc: "盐城外国语学校一号楼二层宿舍201，空调温度32℃，风力4级将与12:00合闸......",
					},
					{
						id: '2',
						name: '智能管理',
						type: 0,
						time: '18:13',
						contentName: "盐城外国语学校一号楼二层宿舍201",
						contentDesc: "盐城外国语学校一号楼二层宿舍201，空调温度32℃，风力4级将与12:00合闸......",
					},
					{
						id: '3',
						name: '流程中心',
						type: 0,
						time: '18:13',
						contentName: "盐城外国语学校一号楼二层宿舍201",
						contentDesc: "盐城外国语学校一号楼二层宿舍201，空调温度32℃，风力4级将与12:00合闸......",
					},
					{
						id: '4',
						name: '故障中心',
						type: 0,
						time: '18:13',
						contentName: "盐城外国语学校一号楼二层宿舍201",
						contentDesc: "盐城外国语学校一号楼二层宿舍201，空调温度32℃，风力4级将与12:00合闸......",
					},
					{
						id: '5',
						name: '告警中心',
						type: 0,
						time: '18:13',
						contentName: "盐城外国语学校一号楼二层宿舍201",
						contentDesc: "盐城外国语学校一号楼二层宿舍201，空调温度32℃，风力4级将与12:00合闸......",
					},
					{
						id: '6',
						name: '健康报告',
						type: 0,
						time: '18:13',
						contentName: "盐城外国语学校一号楼二层宿舍201",
						contentDesc: "盐城外国语学校一号楼二层宿舍201，空调温度32℃，风力4级将与12:00合闸......",
					},
					{
						id: '7',
						name: '报表管理',
						type: 0,
						time: '18:13',
						contentName: "盐城外国语学校一号楼二层宿舍201",
						contentDesc: "盐城外国语学校一号楼二层宿舍201，空调温度32℃，风力4级将与12:00合闸......",
					},
				]
			};
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		onShow() {
			// this.userInfo = uni.getStorageSync('userInfo')
		},
		onReady() {
			// 隐藏导航栏
			uni.hideTabBar({});
		},
		methods: {
			async queryDeviceInfo() {
				await queryDeviceInfo({
					roleCode: this.userInfo.roleCode
				}).then(res => {
					this.deviceInfo = res.object
				})
			},

			// tabs通知swiper切换
			tabsChange(e) {
				this.current = e.index;
				this.swiperCurrent = e.index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				this.current = e.detail.current
				this.swiperCurrent = e.detail.current
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log(11111111111)
			},

			goPage(url) {
				uni.navigateTo({
					url
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.messagePage {
		height: calc(100vh - var(--window-top));
		width: 100%;

		.content {
			display: flex;
			flex-direction: column;

			height: calc(100% - 120rpx);
			font-family: Source Han Sans CN, Source Han Sans CN-400;

			::v-deep .u-tabs__wrapper__nav[data-v-48634e29] {
				display: flex;
				flex-direction: row;
				position: relative;
				justify-content: space-between;
			}

			//选中蓝色滑块对应
			::v-deep .u-tabs__wrapper__nav__item {
				flex: 1 1 0% !important;
			}

			.swiper-box {
				flex: 1;
			}

			.swiper-item {
				height: 100%;
			}

			.topBoxItem {
				width: 210rpx;
				height: 148rpx;
				box-sizing: border-box;
				border-radius: 16rpx;
				box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25), 0px 0px 4px 0px rgba(0, 0, 0, 0.10);

				.title {
					font-size: 28rpx;
					color: #ffffff;
				}
			}

			.bgColor1 {
				background: #3f7eff;
			}

			.bgColor2 {
				background: #ffac2f;
			}

			.bgColor3 {
				background: #6d55ff;
			}

			.content_item {
				background: #ffffff;
				border-radius: 8px;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				font-family: "黑体", "Heiti SC", "STHeiti", sans-serif;

				.bluePoint {
					width: 12rpx;
					height: 12rpx;
					background: #3276ff;
					border-radius: 50%;
				}

				.itemName {
					font-size: 24upx;
					color: #999999;
				}

				.itemTitle {
					font-size: 28upx;
					color: #333333;
					font-weight: 600;
				}

			}
		}
	}
</style>